<template>
  <div class="app-container">
    <!-- 搜索框 -->
    <data-select
      :search-data="search"
      :button-data="buttonData"
      @return-search="searchList"
      @return-reset="reset"
    />
    <!-- 表格 -->
    <data-table
      :table-data="tableData"
      :column="column"
      :pagination.sync="pagination"
      :table-option="tableOption"
      @search-event="getListBySearch"
    />
    <!-- 弹框 -->
    <data-dialog
      ref="dialog"
      :dialog-visible.sync="dialogVisible"
      :dialog-data="dialogData"
      :dialog-title="dialogTitle"
      :dialog-rule="dialogRule"
      :confirm-func="confirm"
    />
    <!-- 角色分配 -->
    <auth-menu
      ref="authMenu"
      @resetList="getListBySearch"
    />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import DataSelect from '@/components/DataSelect'
import DataTable from '@/components/DataTable'
import DataDialog from '@/components/DataDialog'
import authMenu from './authMenu'
import portalApi from '@/api/portal/portal'
export default {
  name: '',
  components: {
    DataSelect,
    DataTable,
    DataDialog,
    authMenu
  },
  data() {
    this.dialogRule = {
      roleCode: [
        {
          required: true, message: this.$t('common.enter') + this.$t('tenant.roleManage.roleCode'), trigger: ['blur', 'change']
        }
      ],
      roleName: [
        {
          required: true, message: this.$t('common.enter') + this.$t('tenant.roleManage.roleName'), trigger: ['blur', 'change']
        }
      ]
    }
    return {
      // 搜索框参数
      search: {
        roleCode: {
          label: this.$t('tenant.roleManage.roleCode'),
          value: null,
          type: 'input',
          slotName: 'roleCode'
        },
        roleName: {
          label: this.$t('tenant.roleManage.roleName'),
          value: null,
          type: 'input'
        }
      },
      // 表格上方操作按钮，比如新增
      buttonData: [
        {
          label: this.$t('common.create'),
          permission: 'roleManage:add',
          action: this.add,
          type: 'white'
        }
      ],
      tableOption: {
        option: {}
        // event: {
        //   sizeChange: this.sizeChange,
        //   currentChange: this.currentChange
        // }
      },
      // 表格参数
      column: {
        // 表头
        data: [
          {
            label: this.$t('tenant.roleManage.index'),
            prop: 'index',
            show: true
          },
          {
            label: this.$t('tenant.roleManage.roleCode'),
            prop: 'roleCode',
            show: true
          },
          {
            label: this.$t('tenant.roleManage.roleName'),
            prop: 'roleName',
            show: true
          },
          {
            label: this.$t('tenant.roleManage.updateTime'),
            prop: 'updateTime',
            show: true
          }
        ],
        // 表格中的操作列
        operation: {
          label: this.$t('common.operation'),
          data: [
            {
              label: this.$t('common.edit'),
              permission: 'roleManage:edit',
              action: this.edit
            },
            // {
            //   label: "分配角色",
            //   action: "role",
            // },
            {
              label: this.$t('tenant.roleManage.authMenu'),
              permission: 'roleManage:authMenu',
              action: this.authMenu
            }
          ]
        }
      },
      // 分页
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      searchData: {},
      tableData: [],
      dialogVisible: false,
      dialogTitle: '',
      dialogData: [
        {
          key: 'roleCode',
          label: this.$t('tenant.roleManage.roleCode'),
          type: 'input',
          required: true,
          disabled: false
        },
        {
          key: 'roleName',
          label: this.$t('tenant.roleManage.roleName'),
          type: 'input',
          required: true
        },
        {
          key: 'remark',
          label: this.$t('tenant.roleManage.remark'),
          type: 'textarea',
          fullWidth: true
        }
      ]
    }
  },
  computed: {
    ...mapState({
      merchantCode: state => state.user.merchantCode
    })
  },
  mounted() {
  },
  created() {
    if (this.$route.params.parentSearch) {
      const parentSearch = this.$route.params.parentSearch
      this.searchData = parentSearch
      this.setSearch(parentSearch)
    }
    this.$nextTick(() => {
      this.getListBySearch()
    })
  },
  methods: {
    // 获取列表数据
    getListBySearch() {
      const param = Object.assign(this.searchData, this.pagination)
      portalApi.getRoleListByPage(param).then(res => {
        this.tableData = res.data.list
        this.pagination = res.data.pagination
      })
    },
    // 重置
    reset(type) {
      this.pagination.pageNum = 1
      this.searchData = {}
      this.getListBySearch()
    },
    // 给搜索组件赋值
    setSearch(parentSearch) {
      for (const key in this.search) {
        const val = this.search[key]
        // eslint-disable-next-line eqeqeq
        if (val.constructor == Object) {
          console.log(parentSearch)
          for (const parentKey in parentSearch) {
            const parent = parentSearch[parentKey]
            // eslint-disable-next-line eqeqeq
            if (key == parentKey) {
              this.search[key].value = parent
            }
          }
        }
      }
    },
    // 确定
    confirm(data) {
      // eslint-disable-next-line eqeqeq
      if (this.dialogTitle == this.$t('common.create')) {
        data.merchantCode = this.merchantCode
        portalApi.addRole(data).then(res => {
          this.$message.success(this.$t('common.addSuccess'))
          this.dialogVisible = false
          this.getListBySearch()
        })
        // eslint-disable-next-line eqeqeq
      } else if (this.dialogTitle == this.$t('common.edit')) {
        portalApi.updateRole(data).then(res => {
          this.$message.success(this.$t('common.editSuccess'))
          this.dialogVisible = false
          this.getListBySearch()
        })
      }
    },
    add(data, e) {
      this.$refs.dialog.form = {
        roleCode: '',
        roleName: '',
        remark: ''
      }
      this.dialogData.map(item => {
        // eslint-disable-next-line eqeqeq
        if (item.key == 'roleCode') {
          item.disabled = false
        }
      })
      this.dialogTitle = this.$t('common.create')
      this.dialogVisible = true
    },
    searchList(data, e) {
      console.log('searchList')
      console.log(data)
      this.pagination.pageNum = 1
      this.searchData = data
      this.getListBySearch(data)
    },
    edit(data, e) {
      portalApi.getRoleDetail({ roleId: data.roleId }).then(res => {
        this.$refs.dialog.form = res.data
        this.dialogData.map(item => {
          // eslint-disable-next-line eqeqeq
          if (item.key == 'roleCode') {
            item.disabled = true
          }
        })
        this.dialogTitle = this.$t('common.edit')
        this.dialogVisible = true
      })
    },
    authMenu(data, e) {
      Promise.all([
        portalApi.getRoleMenuList({ roleCode: data.roleCode }),
        portalApi.getMenuListByAuth()
      ]).then(res => {
        this.$refs.authMenu.checkedKeys = res[0].data.map(v => {
          return v.menuCode
        })
        this.$refs.authMenu.treeData = res[1].data
        this.$nextTick(() => {
          this.$refs.authMenu.role = data
          this.$refs.authMenu.show()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

